<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <h1>数据代理</h1>

  </div>
</body>
<script>

  /* 
  数据代理
  vm身上有数据
  _data上也有数据
  */

  let vm = {
    _data: {
      name: "laowang",
      age: 22,
      sex: "男",
      subject:{
        math:60,
        china:70,
        emg:99
      }
    }
  }
  // let key of Object.keys(vm._data)
  // 遍历生成 key属性 是 对象的key
  for(let key of Object.keys(vm._data)){
    // 对象的key
    // console.log(key);
    
    //给vn身上添加属性
    Object.defineProperty(vm,key,{
      get: function proxyGetter(){
        //将vm_data中的数据 返回给vm 数据是在这里设置的
        return vm._data[key]
      },
      set: function proxySetter(newVal){
        // newVal 改了的值
        console.log('newVal给改了',newVal);
        vm._data[key] = newVal;
        // console.log('newVal',newVal);
      }
    })
  }
  console.log(vm);
  // vm.age=444

  // let a = {
  //   b:2
  // }

  // a.c = 3
  // a["d"] =3 
 
  // console.log(a);






</script>

</html>